<template>
  <div class="analysis-map">
    <public-page-search @page-search-change="pageSearchChange"></public-page-search>
    <ol-map ref="map" height="450px" @moveend="handleMoveend" @movestart="movestartHandle">
      <my-map-html
        v-for="(item, index) in mapList"
        :key="index"
        :visible="visibleHtml"
        :position="item.coordinate"
        :stopEvent="false"
      >
        <div
          class="cluster"
          v-if="item.heapNum && item.heapNum > 1"
          @click="handlepolymerization(item)"
        >
          {{ item.heapNum }}
        </div>
        <div class="iconfont icon-weizhi marker" v-else @click="handleMarker(item)"></div>
      </my-map-html>
    </ol-map>
    <listDrawer v-model:visible="visible" :portionUrl="portionUrl" :params="params" />
    <!-- 警情详情 -->
    <a-drawer
      title="警情详情"
      :destroyOnClose="destroyOnClose"
      :width="600"
      :visible="visibledetail"
      @close="onClose"
      :body-style="{ paddingBottom: '80px' }"
    >
      <police-details :case-no="caseNoDetails"></police-details>
    </a-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, nextTick } from 'vue';
import olMap from '@/components/openlayers/index.vue';
import PublicPageSearch from '@/views/intelligent-analysis/components/public-page-search/index.vue';
import MyMapHtml from '@/components/openlayers/packages/my-map-html';
import listDrawer from '@/components/police-list-drawer/index.vue';
import { queryCaseAgg } from '@/api/intelligentanalysis/map';
import PoliceDetails from '@/components/police-details/index.vue';
import moment from 'moment';
//查询条件
// interface queryForm {
//   callTimeStart: string;
//   callTimeEnd: string;
//   classifyType: string;
//   maxLatitude: string;
//   maxLongitude: string;
//   minLatitude: string;
//   minLongitude: string;
//   mapLayer: string;
//   page: string;
// }
export default defineComponent({
  components: {
    olMap,
    MyMapHtml,
    listDrawer,
    PoliceDetails,
    PublicPageSearch,
  },
  setup() {
    const visible = ref<boolean>(false);
    const caseNoDetails = ref<string>('');
    const destroyOnClose = ref<boolean>(true);
    const visibledetail = ref<boolean>(false);
    const visibleHtml = ref(false);
    const portionUrl = ref<string>('/map/queryCaseList');
    //查询字段
    const queryForm = reactive({
      callTimeStart: moment().subtract(1, 'year').format('YYYY-MM-DD') + ' ' + '00:00:00',
      callTimeEnd: moment().format('YYYY-MM-DD') + ' ' + '23:59:59',
      classifyCodes: '',
      inputParams: '',
      xqdwCodes: '',
      callSummaryCodes: '',
      dealSummaryCodes: '',
      caseNos: '',
      classifyType: '',
      maxLatitude: '',
      maxLongitude: '',
      minLatitude: '',
      minLongitude: '',
      mapLayer: '12',
      page: 1,
      underLayer: 0,
    });
    //list列表铲鲟条件
    let params = reactive({
      callTimeStart: moment().subtract(1, 'year').format('YYYY-MM-DD') + ' ' + '00:00:00',
      callTimeEnd: moment().format('YYYY-MM-DD') + ' ' + '23:59:59',
      page: '1',
      size: '10',
      caseNos: '',
    });
    //经纬度集合
    const mapList = ref<any>([]);

    const handleMoveend = e => {
      let extent = e.frameState.extent;
      queryForm.minLongitude = extent[0];
      queryForm.minLatitude = extent[1];
      queryForm.maxLongitude = extent[2];
      queryForm.maxLatitude = extent[3];
      queryForm.mapLayer = e.frameState.viewState.zoom;
      getMapData();
    };

    const movestartHandle = e => {
      visibleHtml.value = false;
    };
    //获取经纬度
    const getMapData = () => {
      queryCaseAgg(queryForm).then(res => {
        const list: Array<any> = [];
        res.data.details.forEach(item => {
          const coordinate = [
            item.longitude || item.avgLongitude,
            item.latitude || item.avgLatitude,
          ];
          list.push({
            coordinate,
            heapNum: item.heapNum,
            caseNo: item.caseNo,
          });
        });
        mapList.value = list;
        nextTick(() => {
          visibleHtml.value = true;
        });
      });
    };
    //打开详情
    const handleMarker = value => {
      caseNoDetails.value = value.caseNo;
      visibledetail.value = true;
    };
    //关闭详情
    const onClose = () => {
      visibledetail.value = false;
    };
    //打开聚合弹框
    const handlepolymerization = item => {
      visible.value = true;
      params.caseNos = item.caseNo;
    };

    const pageSearchChange = params => {
      queryForm.callTimeStart = params.callTimeStart;
      queryForm.callTimeEnd = params.callTimeEnd;
      queryForm.classifyCodes = params.classifyCodes;
      queryForm.inputParams = params.inputParams;
      queryForm.xqdwCodes = params.xqdwCodes;
      queryForm.callSummaryCodes = params.callSummaryCodes;
      queryForm.dealSummaryCodes = params.dealSummaryCodes;
      //   Object.keys(params).forEach(key => (queryForm[key] = params[key]));
      getMapData();
    };
    return {
      handleMarker,
      onClose,
      caseNoDetails,
      destroyOnClose,
      handleMoveend,
      movestartHandle,
      visibledetail,
      visibleHtml,
      queryForm,
      mapList,
      visible,
      portionUrl,
      params,
      handlepolymerization,
      pageSearchChange,
    };
  },
});
</script>

<style lang="less" scoped>
.icon-weizhi:before {
  color: #409eff;
  font-size: 20px;
  content: '\e640';
}
.analysis-map {
  .cluster {
    width: 32px;
    height: 32px;
    color: #fff;
    line-height: 32px;
    text-align: center;
    background: rgba(#1b81e0, 0.85);
    border-radius: 50%;
    cursor: pointer;
    &:hover {
      background: rgba(#1b81e0, 0.95);
    }
    &:active {
      background: rgba(#eb8924, 0.95);
    }
  }
  .marker {
    cursor: pointer;
    &::before {
      color: rgba(#1b81e0);
      font-size: 24px;
    }
    &:hover {
      &::before {
        color: rgba(#1b81e0, 0.85);
      }
    }
    &:active {
      &::before {
        color: rgba(#eb8924, 0.95);
      }
    }
  }
}
</style>
